<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test for jQuery validate() plugin</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/cmxforms.js" type="text/javascript"></script>
<script src="js/metadata.js" type="text/javascript"></script>
<script src="js/validate.js" type="text/javascript"></script>

<style type="text/css">
div.error {
	background-color: #eee;
	border: 1px solid red;
	margin: 5px;
	padding: 5px;
}
div.error ol li {
	list-style-type: disc;
	margin-left: 20px;
}
</style>

</head>
<body>
<!-- our error container -->
<div class="error">
	<h4>There are serious errors in your form submission, please see below for details.</h4>
	<ol>
		<li><label for="email" class="error">Please enter your email address</label></li>
		<li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li>
		<li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li>
	</ol>
</div>

<form class="cmxform" id="form1" method="get" action="">
	<fieldset>
		<legend>Validating a complete form</legend>
		<p>
			<label for="email">Email</label>
			<input id="email" name="email" class="{validate:{required:true,email:true}}" />
		</p>
		<p>
			<label for="phone">Phone</label>
			<input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangeLength:[2,8]}}" />
		</p>
		<p>
			<label for="address">Address</label>
			<input id="address" name="address" class="some other styles {validate:{required:true,minLength:3}}" />
		</p>
		<p>
			<label for="agree">Please agree to our policy</label>
			<input type="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" />
		</p>
		<p>
			<input class="submit" type="submit" value="Submit"/>
		</p>
	</fieldset>
</form>

<div class="error">
	<h4>There are serious errors in your form submission, please see details above the form!</h4>
</div>


<script type="text/javascript">
	$(document).ready(function() {
		var container = $('div.error');
		// validate the form when it is submitted
		var options = {
			debug: true,
			errorContainer: container,
			errorLabelContainer: $("ol", container),
			errorWrapper: 'li',
			metaWrapper: "validate"
		}
		$("#form1").validate(options);
	});
</script>

<a href="validateTest.html">Back to main page</a>

</body>
</html>